<template>
  <div class="menu">
    <div
      class="menu-item"
      :class="{ active: activeId === item.id }"
      v-for="item in list"
      :key="item.id"
      @click="handleChange(item.id)"
    >
      <img
        class="icon"
        :src="
          requireImg(activeId === item.id ? `${item.icon}-select` : item.icon)
        "
        alt=""
        srcset=""
      />
      <span class="label">{{ item.label }}</span>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
  activeId: String,
});

const requireImg = (name) => {
  return new URL(`../../assets/image/index/${name}.png`, import.meta.url).href;
};

const emit = defineEmits(["change"]);

function handleChange(id) {
  emit("change", id);
}
</script>

<style scoped lang="scss">
.menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 35px;
  flex: 1;

  .menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 28px;
    cursor: pointer;

    .icon {
      width: 25px;
      height: 25px;
      margin-bottom: 7px;
    }

    .label {
      font-size: 18px;
      color: #5b5b5b;
    }
  }

  .active {
    .label {
      font-size: 18px;
      color: #de443a;
    }
  }
}
</style>
